<template>
  <div
    class="panel-property"
  >
    <div class="content">
      <el-form
        ref="form"
        class="prop-form"
        label-position="right"
        :model="form"
        label-width="30%"
      >
        <BaseOption
          :form="form"
          option="title"
        />
        <el-form-item>
          <template #label>
            <div class="demo-label" title="标题1的值(命名空间默认为el的sweetui的输入框)">标题1的值(命名空间默认为el的sweetui的输入框)</div>
          </template>
          <sweet-config-provider>
            <sweet-input v-model="form.titleValue1" />
          </sweet-config-provider>
        </el-form-item>

        <el-form-item>
          <template #label>
            <div class="demo-label" title="标题2的值(命名空间为sweet的sweetui的输入框)">标题2的值(命名空间为sweet的sweetui的输入框)</div>
          </template>
          <sweet-config-provider namespace="sweet">
            <sweet-input v-model="form.titleValue2" />
          </sweet-config-provider>
        </el-form-item>

        <el-form-item>
          <template #label>
            <div class="demo-label" title="标题3的值(elementplus的输入框)">标题3的值(elementplus的输入框)</div>
          </template>
            <el-input v-model="form.titleValue3" />
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>
<script>
import panelPropertyBase from '@/mixin/panel-property-base.js';
import { mergeObj } from '@/utils/util.js';
import BaseOption from '../../common/base-option/base-option.vue';
import config from './config.js';

export default {
  name: 'PanelProperty',
  components: {
    BaseOption,
  },
  mixins: [panelPropertyBase],
  props: ['config', 'widgetInstanceId', 'widget'],
  data() {
    return {
      form: {},
    };
  },
  created() {
    if (this.config) {
      this.form = JSON.parse(JSON.stringify(this.config.config.property));
    }

    // 合并config.js属性，防止新增属性缺失而报错
    const _form = JSON.parse(JSON.stringify(config.config.property));
    this.form = mergeObj(_form, this.form);
  },
  methods: {
  },
};
</script>

<style lang="less" scoped>
@import '../../common/less/panel-property.less';
</style>
<style lang="less" scoped>
.panel-property {
  .content {
    .prop-form {
      padding: 0 10px;

      :deep(.el-form-item) {
        margin-bottom: 0;
        .demo-label {
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
